<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <year-month-picker v-model="time"></year-month-picker>
        <el-form-item label="所属行业">
          <dictionary-picker dic-code="HANG_YE_LEI_XING" v-model="industry"></dictionary-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="grid-content margin-bottom">
      <div
        class="flex align-center content-block bg-white border-radius"
        v-for="item in overview" :key="item.label"
      >
        <div style="flex: 1;padding: 30px 60px 30px 30px;">
          <div class="block-label dark-text-white">{{ item.label }}</div>
          <p class="flex justify-between block-text dark-text-white">
            <span>{{ item.number }}</span>
            <span>{{ item.proportion }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
        v-loading="loading" :data="lists" height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="pagination" layout="total,prev,pager,next"
      hide-on-single-page background
      :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="getLists"
    ></el-pagination>
  </div>
</template>

<script>
import DictionaryPicker from '@/components/dictionary-picker'
import TimePicker from '@/mixins/time-picker'

export default {
  name: 'energy-efficiency-analysis-production',
  mixins: [TimePicker],
  components: { DictionaryPicker },
  data () {
    return {
      industry: '',
      loading: false,
      lists: [],
      columns: [
        { label: '指标', prop: 'col1' },
        { label: '单位', prop: 'col2' },
        { label: '本期值', prop: 'col3' },
        { label: '同比', prop: 'col4' },
        { label: '累计值', prop: 'col5' },
        { label: '同比', prop: 'col6' },
        { label: '产品', prop: 'col7' },
        { label: '单位', prop: 'col8' },
        { label: '本期产量', prop: 'col9' },
        { label: '同比', prop: 'col10' },
        { label: '累计产量', prop: 'col11' },
        { label: '同比', prop: 'col12' },
        { label: '企业', prop: 'col13' },
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 12,
        total: 0
      },
      overview: [
        {
          icon: 'all',
          label: '产品单耗指标',
          number: '- 个',
          proportion: '- %'
        },
        {
          icon: 'all',
          label: '同比增长指标',
          number: '- 个',
          proportion: '- %'
        },
        {
          icon: 'all',
          label: '同比下降指标',
          number: '- 个',
          proportion: '- %'
        },
        {
          icon: 'all',
          label: '数据平稳指标',
          number: '- 个',
          proportion: '- %'
        }
      ]
    }
  },
  computed: {
    qs () {
      return {
        time: this.time,
        industry: this.industry
      }
    },
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          this.loading = false
          resolve()
          this.lists = []
        }, 300)
      })
    }
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: $gutter;
  }
  .content-block {
    box-shadow: 0 0 14px rgba(0,0,0,0.1);
  }
  .block-icon {
    font-size: 3em;
    padding-left: 40px;
    padding-right: 40px;
  }
  .block-label {
    font-weight: 600;
    color: #333;
  }
  .block-text {
    color: gray;
    font-size: 12px;
    margin-bottom: 0;
  }











</style>
